Getting started
i18next can
be added to your project using npm or
yarn:
# npm
$
npm
install
i18next --save
# yarn
$
yarn
add
i18next
The default
export is UMD compatible (commonjs, requirejs,
global).
In the
/dist folder you
may find additional builds for commonjs, es6 modules. Optimized
to load i18next in webpack, rollup, ... or node.js. The correct
entry points are already configured in the package.json so there
should be no extra setup to get the best build
option.
i18next can
be imported like this:
import
i18next from
'https://deno.land/x/i18next/index.js'
// or import i18next
from
'https://raw.githubusercontent.com/i18next/i18next/master/src/index.js'
// or import i18next
from
'https://cdn.jsdelivr.net/gh/i18next/i18next/src/index.js'
You can
also directly add a script tag loading i18next from one of the
CDNs providing it:
unpkg.com
esm or
cjs:
Make sure
to use a fixed version in production like https://unpkg.com/i18next@17.0.0/dist/umd/i18next.js as passing
no version will redirect to latest version which might contain
breaking changes in future.
cdnjs.com
jsdelivr.com
Before we
dive into the first sample, please note the following: By
default, i18next uses a key-based notation to look up
translations, which comes with the benefit of additional
structure for your
translation files.
The
downside of this is that your keys must not be in natural
language — the names of the keys are not used as fallback
content and the key names must not include reserved characters
: and
. since
those are used by i18next.
Please be
aware these samples are just showing basic usage of the core
functionality. For production usage please consider using one of
our framework
integrations to get
better and simpler integrations (Setting innerHTML is just done
to show how it works).
import
i18next from
'i18next';
i18next.init({
lng:
'en',
// if you're using a
language detector, do not define the lng
option
debug:
true,
resources:
{
en:
{
translation:
{
"key":
"hello
world"
}
}
}
});
// initialized and
ready to go!
// i18next is already
initialized, because the translation resources
where passed via init function
document.getElementById('output').innerHTML
=
i18next.t('key');
Or using
callback init signature:
import
i18next from
'i18next';
i18next.init({
lng:
'en',
// if you're using a
language detector, do not define the lng
option
debug:
true,
resources:
{
en:
{
translation:
{
"key":
"hello
world"
}
}
}
},
function(err, t)
{
// initialized and
ready to go!
document.getElementById('output').innerHTML
=
i18next.t('key');
});
Or using
Promises:
i18next.init({
lng:
'en',
// if you're using a
language detector, do not define the lng
option
debug:
true,
resources:
{
en:
{
translation:
{
"key":
"hello
world"
}
}
}
}).then(function(t)
{
// initialized and
ready to go!
document.getElementById('output').innerHTML
=
i18next.t('key');
});
Or using
async/await:
await
i18next.init({
lng:
'en',
// if you're using a
language detector, do not define the lng
option
debug:
true,
resources:
{
en:
{
translation:
{
"key":
"hello
world"
}
}
}
});
// initialized and
ready to go!
document.getElementById('output').innerHTML
=
i18next.t('key');
if
you are lazy
loading the translation
resources,
you may need to wait for i18next to have
finished to initialize.
As you
might see, this basic sample provides only one language directly
added on init… let's extend this to have buttons to change
language from English to German:
Do
you quickly want to translate your resources
to other languages?
Try: https://translate.i18next.com
This is a
working sample showing translated text. To learn more, have a
look at the following extended sample:
The
extended sample adds the language detector for our browser and
the http-backend to load translation files from this
documentation's i18next-gitbook
repo.
You should
now have an idea about how to achieve the basic setup. It's time
to learn more about:
-
-
Find an extension for your project, eg. react-i18next, jquery-i18next and others. Using those wrappers around i18next makes using i18next a lot simpler in your project. Most of such modules come with extended examples.
-
-
-
-
Last
modified 2mo ago